<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>09.Ajax异步请求</title>
  </head>
  <body>
    <p>打开控制台看打印顺序</p>
    <p>不等客户端接收到服务器端的响应数据，就先执行异步后面的代码</p>
    <div>
      <pre>
        
          console.log("1");

          const xhr = new XMLHttpRequest();
          xhr.open("get", "http://localhost:3000/first");
          xhr.send();
          // 异步执行
          xhr.onload = function () {
          console.log("2");

          console.log(xhr.responseText);

          console.log("3");
        };
          console.log("4");
          
      </pre>
    </div>

    <ul>
      <li>1</li>
      <li>4</li>
      <li>2</li>
      <li>hi from server</li>
      <li>3</li>
    </ul>
  </body>
</html>
<script>
  console.log("1");
  const xhr = new XMLHttpRequest();
  xhr.open("get", "http://localhost:3000/first");
  xhr.send();
  // 异步执行
  xhr.onload = function () {
    console.log("2");
    console.log(xhr.responseText);
    console.log("3");
  };
  console.log("4");
</script>
